<template>
	<Modal v-model="ShowLogin" width="360" :mask-closable="false">
		<p slot="header" style="color:#f60;text-align:center">
			<!-- <Icon type="ios-information-circle"></Icon> -->
			<span>注册</span>
		</p>
		<div style="text-align:center">
			<Form ref="formInline" :model="formInline" :rules="ruleInline" label-position="left" :label-width="80" inline>
				<FormItem prop="user" label="帐号" labelFor="element1">
					<Input style="width: 220px;" type="text" elementId="element1" clearable v-model="formInline.user"
						placeholder="Username">
					<Icon type="ios-person-outline" slot="prepend"></Icon>
					</Input>
				</FormItem>
				<FormItem prop="password" label="密码" labelFor="element2">
					<Input style="width: 220px;" type="password" elementId="element2" clearable password v-model="formInline.password"
						placeholder="Password">
					<Icon type="ios-lock-outline" slot="prepend"></Icon>
					</Input>
				</FormItem>
				<FormItem prop="passwdCheck" label="确认密码" labelFor="element3">
					<Input style="width: 220px;" placeholder="Password" elementId="element3" type="password" password clearable
						v-model="formInline.passwdCheck">
					<Icon type="ios-lock-outline" slot="prepend"></Icon>
					</Input>
				</FormItem>
			</Form>
			<slide-verify :l="50" :r="10" :w="325" :h="120" @success="onSuccess" @fail="onFail" @refresh="onRefresh"
				ref="slideBlock" :slider-text="msg"></slide-verify>
		</div>
		<div slot="footer">
			<!-- <Button type="error" size="large" long :loading="modal_loading" @click="del">删除</Button> -->
			<Button type="primary" :loading="modal_loading" @click="handleSubmit('formInline')" size="large"
				long>注册</Button>
			<!-- <Button type="primary" @click="handleSubmit('formInline')">Signin</Button> -->
		</div>
	</Modal>
</template>

<script>
	import { mapActions, mapGetters } from "vuex";
	import axios from "axios";
	import { User } from '../utils/api.js';
	export default {
		data() {
			const validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('密码不能为空'));
				} else {
					if (this.formInline.passwdCheck !== '') {
						// 对第二个密码框单独验证
						this.$refs.formInline.validateField('passwdCheck');
					}
					callback();
				}
			};
			const validatePassCheck = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入您的密码'));
				} else if (value !== this.formInline.password) {
					callback(new Error('两次输入的不一样!'));
				} else {
					callback();
				}
			};
			return {
				msg: "向右滑动",
				modal_loading: false,
				formInline: {
					user: '',
					password: '',
					passwdCheck: '',
				},
				ruleInline: {
					user: [
						{ required: true, message: '帐号不能为空', trigger: 'blur' },
						{
							type: 'string',
							min: 6,
							message: '帐号长度不能小于6位',
							trigger: 'blur'
						}
					],
					password: [
						{ required: false,validator: validatePass, trigger: 'blur' },
					],
					passwdCheck: [
						{ required: false,validator: validatePassCheck, trigger: 'blur' }
					],
				}
			}
		},
		computed: {
			...mapGetters('login', ['getShowLogin']),
			ShowLogin: {
				get() {
					return this.getShowLogin
				},
				set(value) {
					this.$store.commit('login/setShowLogin', value)
				}
			}
		},
		methods: {
			...mapActions('login', ['setShowLogin']),
			del() {
				//开启loading
				this.modal_loading = true;
				setTimeout(() => {
					this.modal_loading = false;
					this.setShowLogin(false);
					this.$Message.success('Successfully delete');
				}, 2000);
			},
			// 拼图成功
			onSuccess(times) {
				console.log(times);
				let ms = (times / 1000).toFixed(1);
				this.msg = "验证成功, 耗时 " + ms + "s";

				this.$Notice.success({
					title: this.msg,
				});
			},
			// 拼图失败
			onFail() {
				this.onRefresh(); // 重新刷新拼图
			},
			// 拼图刷新
			onRefresh() {
				this.msg = "再试一次";
			},
			// login
			async handleSubmit(name) {
				if (this.msg == "再试一次" || this.msg == "向右滑动") {
					this.$Message.error('请滑动拼图!');
				} else {
					this.$refs[name].validate((valid) => {
						if (valid) {
							// valid = true/false
							this.modal_loading = true
							User({
								action: 'register',
								username: this.formInline.user,
								password: this.formInline.password
							}).then((result) => {
								console.log(result);
								if (result.code === 0) {
									localStorage.setItem('uni_id_token', result.token)
									localStorage.setItem('uni_id_token_expired', result.tokenExpired)
									this.$Message.success('Success!')
									this.modal_loading = false
								} else {
									this.$Message.error('Fail!');
								}
							})
						} else {
							this.$Message.error('oh my god! 你倒是填点什么!');
						}
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>

</style>
